<template>
  <div class="main">
    <div class="item1">
      <div class="box1">
        <img
          src="../../assets/studytogether.svg"
          alt=""
          width="30px"
          height="30px"
          style="margin-top:20px"
        />
        <div style="font-size: 24px">一起自习</div>
        <button class="buttontype">Start</button>
      </div>
      <div style="position:absolute;top:13px;right:10px;"><img src="../../assets/studytogether2.svg" alt="" width="180px" height="180px"></div>
      <div style="position:absolute;top:200px;left:10px;"><img src="../../assets/englishtogether2.svg" alt="" width="180px" height="180px"></div>
      <div class="box2">
        <img
          src="../../assets/englishtogether.svg"
          alt=""
          width="30px"
          height="30px"
          style="margin-top:20px"
        />
        <div style="font-size: 24px">一起背单词</div>
        <button class="buttontype">Start</button>
      </div>
    </div>
    <div class="item2">
      <div class="box3">
        <img
          src="../../assets/sporttogether.svg"
          alt=""
          width="30px"
          height="30px"
          style="margin-top:20px"
        />
        <div style="font-size: 24px">一起运动</div>
        <button class="buttontype">Start</button>
      </div>
      <div style="position:absolute;top:383px;right:5px;"><img src="../../assets/sporttogether2.svg" alt="" width="180px" height="180px"></div>
      <div style="position:absolute;top:575px;left:5px;"><img src="../../assets/movietogether2.svg" alt="" width="180px" height="180px"></div>
      <div class="box4">
        <img
          src="../../assets/movietogether.svg"
          alt=""
          width="30px"
          height="30px"
          style="margin-top:20px"
        />
        <div style="font-size: 24px">一起看电影</div>
        <button class="buttontype">Start</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.main {
  width: 100%;
  height: 765px;
}
.item1 {
  width: 100%;
  height: 50%;
  /* background-color: chartreuse; */
}
.item2 {
  width: 100%;
  height: 50%;
  /* background-color: coral; */
}
.box1 {
  width: 170px;
  height: 180px;
  /* background-color: crimson; */
  margin-left: 10px;
  margin-top: 13px;
  text-align: center;
  border: .5px solid #f5657c;
  border-radius: 20px 0 20px 0;
}
.box2 {
  width: 170px;
  height: 180px;
  /* background-color: cyan; */
  right: 10px;
  position: absolute;
  text-align: center;
  border: .5px solid #f5657c;
  border-radius: 20px 0 20px 0;
}
.box3 {
  width: 170px;
  height: 180px;
  /* background-color: crimson; */
  margin-left: 10px;
  margin-top: -8px;
  text-align: center;
  border: .5px solid #f5657c;
  border-radius: 20px 0 20px 0;
}
.box4 {
  width: 170px;
  height: 180px;
  /* background-color: cyan; */
  right: 10px;
  position: absolute;
  text-align: center;
  border: .5px solid #f5657c;
  border-radius: 20px 0 20px 0;
}
.buttontype {
  width: 100px;
  height: 30px;
  border-radius: 20px;
  border: 0.5px solid #dfdfdf;
  background-color: #f5657c;
  margin-top: 50px;
}
</style>